<template>
  <nut-popup :safe-area-inset-bottom="true" :zIndex="9999" position="bottom" v-model:visible="show">
    <div class="relative bg-[#f8f8f8] pb-50">
      <div class="text-center text-16 c-[#000] pt-15">订单支付</div>
      <div class="text-center pt-20 pb-30">
        <span class="text-14 c-[#333]">￥</span>
        <span class="text-20 c-[#333] font-bold">{{formatMoney(payAccount)}}</span>
      </div>
      <div class="absolute right-6 top-12 z-11">
        <Close @click="close" width="30" />
      </div>
      <div class="px-12">
        <div class="bg-white rounded-6 w-full">
          <nut-radio-group v-model="payWay" class="w-full">
            <div class="flex pay_last justify-between py-12 px-12 b-b b-b-[#efefef] b-b-solid" v-for="(item, i) in payList" :key="i">
              <span>{{ item.name }}</span>
              <nut-radio :label="item.id"></nut-radio>
            </div>
          </nut-radio-group>
        </div>
      </div>
      <div class="px-12 mt-40" @click="toPay">
        <nut-button type="info" block color="#3d8ffd">去支付</nut-button>
      </div>
    </div>
  </nut-popup>
</template>

<script setup>
import wx from 'weixin-js-sdk'
import { showToast } from '@nutui/nutui';
import { Close } from '@nutui/icons-vue';
import { ref, defineEmits, defineProps, defineExpose, watch } from 'vue'
import { formatMoney } from '@/utils/common/money.js'
const emit = defineEmits(['confirm', 'update:id', 'update:text', 'closePay'])
const props = defineProps({
  payAccount: {
    type: [Number, String],
    required: true
  },
  orderNo: {
    type: [Number, String],
    required: true
  },
  text: {
    type: [Number, String],
  },
})
const payList = ref([
  { name: '微信', id: 1 },
  { name: '支付宝', id: 2 },
])
let show = ref(false)
let payWay = ref(1)
let selectedValue = ref([])
const confirm = (obj) => {
  emit('update:id', obj.selectedOptions[0].id)
  emit('update:text', obj.selectedOptions[0].text)
  emit('confirm', obj)
  show.value = false
}
const open = (value) => {
  show.value = true
  selectedValue.value = []
  selectedValue.value.push(value)
}
const close = (value) => {
  show.value = false
  emit('closePay')
}
const toPay = (value) => {
  if (+payWay.value === 1) {
    if (wx.miniProgram) {
      wx.miniProgram.navigateTo({
        url: `/pages/pay/index?orderNo=${props.orderNo}&account=${props.payAccount}`,
        fail: (res) => {
          showToast.text('跳转失败');
        }
      })
    } else {
      showToast.text('请安装微信相关sdk');
    }
  }
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.pay_last:last-child {
  border: none;
}
</style>
<style>
.pay_last .nut-radio__icon {
  color: #3d8ffd;
}
</style>